import React, { Component, PureComponent, useState, useEffect, useRef } from 'react'
import { Link } from "react-router-dom";
import { connect } from 'react-redux'
import '@/css/Home.css';
import { FETCH_PUBLICSQUARE } from '@/actionTypes/';

import CardList2 from '@/comps/CardList2.js'
import scrollDown from '@/utils/scrollDown.js'

import Api from '@/config/api.js'


import { getPoint } from '@/utils/utils.js';
import ScrollDown from '@/utils/scrollDown.js';

function Home(props) {
  var [catCur, setCatCur] = useState(0)
  var [slideWidth, setSlideWidth] = useState([])
  var [slidePosition, setSlidePosition] = useState([])
  useEffect(() => {
    catSlideSwitch(0)
    var tabHeight = document.documentElement.offsetHeight - document.getElementById('bottom_menu_wrap').offsetHeight - document.getElementById('cat_relative').offsetHeight
    document.getElementById('tabs_outer').style.height = tabHeight + 'px'
  }, [])
  useEffect(() => {
    console.log('======有每一', props.publicSquareData.publicSquare);
  })
  function catSlideSwitch(idx) {
    setCatCur(idx)
    var dom_slide_span = document.querySelector('#slide_span')
    if (slideWidth.length === 0) {
      ;[...document.querySelectorAll('.cat-title-font')].map((v, k) => {
        slideWidth.splice(k, 1, v.offsetWidth)
        slidePosition.splice(k, 1, getPoint(v).l)
      })
      setSlideWidth(slideWidth)
      setSlidePosition(slidePosition)
    } else {
      if (!dom_slide_span.style.transition) {
        dom_slide_span.style.transition = 'all .2s'
      }
    }

    dom_slide_span.style.width = slideWidth[idx] + 'px'
    dom_slide_span.style.transform = 'translate(' + slidePosition[idx] + 'px,-100%)'
  }
  return (
    <div>
      <div id="cat_relative">
        <div className="cat-relative">
          <div className="yt yt-ae yt-pc cat-wrap">
            <div className={["cat-title", catCur === 0 ? "cat-title-cur" : ""].join(' ')} onClick={catSlideSwitch.bind(this, 0)}><span className="cat-title-font">广场</span></div>
            <div className={["cat-title", catCur === 1 ? "cat-title-cur" : ""].join(' ')} onClick={catSlideSwitch.bind(this, 1)}><span className="cat-title-font">我的</span></div>
          </div>
          <div className="slide-span" id="slide_span"></div>
        </div>
        <div className="search-ui" onClick={props.fetchPublicSquare}><i className="alifont font12">&#xe62a;</i>&nbsp;搜索</div>
      </div>
      <div className="tabs-outer" id="tabs_outer" ><CardList2 dt={props.publicSquareData.publicSquare} /></div>
    </div>
  )
}

const mapStateToProps = (state) => {
  return {
    publicSquareData: state.square.publicSquare
  }
}


const mapDispatchToProps = (dispatch) => {
  return {
    fetchPublicSquare: () => dispatch(async (dispatch) => {
      console.log('======1212', 1212);
      var res = await React.$axios.get(React.$api.publicSquareList)
      dispatch({
        type: FETCH_PUBLICSQUARE,
        payload: res
      })
    })
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(Home)
